<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>默认样式信息窗体</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
        div{

        }
        .div-table-bt{
            outline: 0px;
            color: #ffffff;
            font-size: 13px;
            width: 64px;
            height: 35px;
            float: left;
            border: 0px;
            border-radius: 3px;
            background-color: #55B5A1;
            margin-right: 5px;
            margin-top:10px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width:24rem;">
    <h2>快递员:</h2>

    <div class="input-item">
        <span>该区域剩余订单数:</span><span id="WaitNum"></span>

    </div>
    <div class="input-item">
        <span>当前已接受订单:</span><span id="wait-finish"></span>
    </div>
    <button class='div-table-bt' style="float: left" id="btn">返回</button>

</div>
<div class="info">
    点击地图上的点标记，打开所添加的自定义信息窗体
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=623abc5396c3bce1492284cb4faf8a54"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/layer/layer.js"></script>
<script src="../js-cookie/jquery.cookie.js"></script>
<script src="../../configure.js"></script>
<script type="text/javascript">    //地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体

    let id = $.cookie('courierId' ); // 存储 cookie
    let x = $.cookie('courierX' ); // 存储 cookie
    let y = $.cookie('courierY'); // 存储 cookie

    $("#btn").click(function(){
        window.location.href = "rush-delivery.html";
    })

    pageAll()

    function pageAll(){
        status = "已下单";
        $.ajax({
            url: url + "/courier/grabbing",
            async: false,
            dataType: "json",
            type: "post",
            async: false,
            data : {
                id:id,
                status:status
            },
            success: function (data) {
                console.log(data)

                if(1 == data.code){

                    let list = data.data.list
                    let html = ``
                    let htmlNum = data.data.total+" 单"

                    $("#WaitNum").html(htmlNum)

                }else if(2 == data.code){

                }
            }
        }, "json")
        status = "待上门";
        $.ajax({

            url: url + "/courier/grabbing",
            async: false,
            dataType: "json",
            type: "post",
            async: false,
            data : {
                id:id,
                status:status
            },
            success: function (data) {
                console.log(data)
                if(1 == data.code){

                    let list = data.data.list
                    let html = ``
                    let htmlNum = data.data.total+" 单"

                    $("#wait-finish").html(htmlNum)

                }else if(2 == data.code){

                }
            }
        }, "json")
    }

    let data = null
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [x, y],
        zoom: 16
    });
    layer.msg('正在加载地图');
    load()
    function load(){
        pageAll()
        if(typeof route != "undefined"){
            map.clearMap()
        }
        $.ajax({
            url: url + "/courier/grabbingMap",
            dataType: "json",
            type: "post",
            data : {
                id:id
            },
            success: function (data) {
                if(1 == data.code){
                    console.log(data)
                    var arr=[];

                    var id = new AMap.Marker({
                        map: map,
                        icon:"../img/快递员.svg",
                        position: [x, y]
                    });

                    for(let i =0; i<data.data.length;i++){
                        arr[i] = new AMap.Marker({
                            map: map,
                            icon:"../img/快递包裹.svg",
                            position: [data.data[i].longitude, data.data[i].latitude]
                        });
                        AMap.event.addListener(arr[i], 'click', function () {
                            layer.msg('线路规划完成');
                            if(typeof route != "undefined"){
                                map.clearMap()
                                load()
                            }
                            let path = [];
                            let infoWindow =[];
                            path.push([x, y]);
                            path.push([x, y]);
                            path.push([data.data[i].longitude, data.data[i].latitude]);
                            map.plugin("AMap.DragRoute", function() {
                                route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
                                route.search(); //查询导航路径并开启拖拽导航
                            });

                            var title = data.data[i].sendDetail,
                            content = [];
                            content.push("详细地址："+data.data[i].sendDetail);
                            content.push("联系电话："+data.data[i].sendPhone);
                            content.push("创建时间："+data.data[i].createTime);
                            content.push("快递状态：待抢单");
                            content.push("<span>寄件人姓名："+data.data[i].sendName+"</span>");
                            content.push("<button style='display: none'>快递ID：--"+data.data[i].pageId+"--</button>");
                            content.push("<button class='come div-table-bt' type='button'>立即抢单</button>");

                            infoWindow[i] = new AMap.InfoWindow({
                                isCustom: true,  //使用自定义窗体
                                content: createInfoWindow(title, content.join("<br/>")),
                                offset: new AMap.Pixel(16, -45)
                            });
                            infoWindow[i].open(map,arr[i].getPosition());
                        });
                    }
                }else if(2 == data.code){
                    layer.msg('定位请求失败', {icon: 2});

                }
            }
        }, "json")
    }

    $(document).on("click",".come",function(){
        let str = $(this).parent().text();
        console.log(str)
        let pageId = str.split("--");
        console.log(pageId)

        layer.confirm('您确定要接受<span style="font-weight:700">快递编号为'+pageId[1]+'</span>的订单吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){

            let status = "待上门";
            $.ajax({
                url: url + "/courier/courierUpdate",
                async: false,
                dataType: "json",
                type: "post",
                data : {
                    id:"66",
                    status:status,
                    pageId:pageId[1]
                },
                success: function (data) {

                    if(1 == data.code){
                        load()
                        layer.msg('抢单成功', {icon: 1});
                    }else if(2 == data.code){
                        layer.msg('抢单失败', {icon: 2});
                    }
                }
            }, "json")
        }, function(){

        });
    })

    function createInfoWindow(title, content) {
        var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";

        //可以通过下面的方式修改自定义窗体的宽高
        //info.style.width = "400px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;

        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);

        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";

        middle.innerHTML = content;
        info.appendChild(middle);

        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = 'relative';
        bottom.style.top = '0px';
        bottom.style.margin = '0 auto';
        var sharp = document.createElement("img");
        sharp.src = "https://webapi.amap.com/images/sharp.png";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
    }

    //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }
</script>
</body>
</html>